<template>
	<view class="c-tabbar" :style="'grid-template-columns: repeat(' + barList.length + ', 1fr);'">
		<view class="c-tabbar-item" :class="{ active: activeBar == index }" v-for="(item, index) in barList"
			:key="index" @click="change(item, index)">
			<view v-if="item.img">
				<img v-if="activeBar === index" :src="item.img" alt="" style="width: 44rpx; height: 44rpx" />
				<img v-else :src="item.activeImg" alt="" style="width: 44rpx; height: 44rpx" />
			</view>
			<uni-icons v-else :type="item.icon" size="22" :color="activeBar == index ? '#000' : '#999'">
			</uni-icons>
			<text>{{ item.title }}</text>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		name: "cTabbar",
		emits: ["update:modelValue", "change"],
		props: {
			barList: {
				type: Array,
				default: () => [],
			},
			// #ifndef VUE3
			value: {
				type: [String, Number],
				default: "",
			},
			// #endif
			// #ifdef VUE3
			modelValue: {
				type: [String, Number],
				default: "",
			},
			// #endif
		},
		computed: {
			...mapState(["activeBar"]),
		},
		watch: {
			// #ifndef VUE3
			value: {
				handler(newVal) {
					this.active = newVal;
				},
				immediate: true,
			},
			// #endif
			// #ifdef VUE3
			modelValue: {
				handler(newVal) {
					this.active = newVal;
				},
				immediate: true,
			},
			// #endif
			barList: {
				handler(newVal) {
					this.matchRoute();
				},
				immediate: true,
			},
		},
		data() {
			return {
				active: "",
				current: null,
			};
		},
		methods: {
			...mapMutations(["setActiveBar"]),
			change(item, index) {
				if (index !== this.activeBar) {
					this.setActiveBar(index);
					this.active = index;
					this.$emit("change", {
						item,
						index
					});
					this.$emit("update:modelValue", index);
					uni.redirectTo({
						url: item.path,
					});
				}
			},
			matchRoute() {
				const routes = getCurrentPages();
				this.current = "/" + routes[routes.length - 1].route;
				// console.log(this.current);
				let matched = false;
				this.barList.filter((val, i) => {
					if (val.path == this.current) {
						this.setActiveBar(i);
						this.active = i;
						matched = true;
					}
				});
				if (!matched) {
					this.setActiveBar(0);
					this.active = 0;
				}
			},
			// 教职工访客审批订阅消息授权弹窗
			teacherVisitorTempMsg() {
				uni.requestSubscribeMessage({
					tmplIds: ["8k5NbM7x-b1tAVEaycIUBltPY5B9C1oXSvGPcHKolIE"],
					success: (res) => {
						console.log("订阅消息", res);
					},
				});
			},
		},
	};
</script>

<style lang="less">
	.c-tabbar {
		width: 100%;
		position: fixed;
		z-index: 999;
		bottom: 10rpx;
		height: 120upx;
		// height: calc(100upx + constant(safe-area-inset-bottom));
		// height: calc(100upx + env(safe-area-inset-bottom));
		display: grid;
		align-content: center;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.c-tabbar-item {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding-top: 50upx;
			font-size: 20rpx;
		}

		color: #999;

		.active {
			color: #000;
		}
	}
</style>